<template>
  <div class="login">
    <div class="opt"><i class="el-icon-help"></i>帮助</div>
    <div class="login-img-container">
      <h4>综合业务管理系统</h4>
      <img src="./../assets/login-img.png">
    </div>
    <div class="login-form">
      <h5>密码登录</h5>
      <el-input
        placeholder="请输入账号"
        v-model="account">
        <template #prefix>
          <i class="el-input__icon el-icon-user"></i>
        </template>
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"  show-password>
        <template #prefix>
          <i class="el-input__icon el-icon-lock"></i>
        </template>
      </el-input>
      <el-button type="primary" @click="login">登录</el-button>
    </div>
    <div class="footer">©2021 版权所有<br>
  青ICP备00000000号-00 青A0-00000000号  青公网安备 0000000000000号</div>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import { useRouter } from 'vue-router';
import { Service } from '../axios'
import { ElMessage } from 'element-plus';

export default defineComponent({
  setup () {
    const router = useRouter()
    let account = ref('')
    let password = ref('')
    function login(){
      Service.post('/user/login',{
        account: account.value,
        password: password.value
      }).then(response =>{
        if(response.data.code == 0){
          router.push('/workbench')
        }
        // else{
        //   ElMessage({                
        //   message: response.data,             
        //   type: 'error',
        //   duration: 2000
        // })
        // }
      })
    }

    return {
      login,
      account,
      password
    }
  }
});
</script>
<style lang="scss" scoped>
.login{
  width: 100vw;
  height: 100vh;
  background: url('./../assets/login-bg.png') no-repeat 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 100px;
  box-sizing: border-box;
  .login-img-container{
    width: 600px;
    h4{
      font-size: 34px;
      color: var(--el-color-primary);
      text-align: center;
    }
  }
  .login-form{
    background: #fff;
    width: 400px;
    height: 420px;
    margin-left: 50px;
    box-shadow: #E8EEF8 -4px 0px 4px 0;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 30px 20px 30px;
    h5{
      font-size: 24px;
      font-weight: normal;
      text-align: center;
    }
    .el-input{
      margin-bottom: 24px;
      i{
        font-size: 20px;
        color: #666;
      }
    }
    .el-button{
      width: 100%;
      // line-height: 20px;
      font-size: 16px;
    }
  }
  .opt{
    position: absolute;
    top: 30px;
    right: 50px;
  }
  .footer{
    text-align: center;
    position: absolute;
    bottom: 30px;
    color: #999;
    line-height: 22px;
  }
}
</style>
